

// 函数 渲染
function render(row, col) {
	// 渲染行
	var rowhtml = ``;
	var colhtml = ``;
	for (var r = 0; r < row; r++) {
		rowhtml += `<div class="row"></div>`
	}
	$(".game_box").html(rowhtml);
	//渲染列
	for (var r = 0; r < row; r++) {
		for (var i = 0; i < col; i++) {
			colhtml += `<div class="outbd">
			<div class="item">
		<div class="front"></div>
		<div class="back"><img class='back_img' src="" alt="" ondragstart="return false"></div>
		</div></div>`
		}
		$(`.row:eq(${r})`).html(colhtml);
		// 渲染一行后清空变量
		colhtml = '';
	}
}
// 函数 根据格子数添加图片,返回生成的数组
function draw(row, col) {
	//console.log(len);
	var len = row * col;
	var arr = [];
	for (var i = 0; i < len; i++) {
		arr[i] = i + 1;
		if (arr[i] > (len / 2)) {
			arr[i] = arr[i] - len / 2
		}
	}
	for (i = 0; i < arr.length; i++) {
		$(`.back_img:eq(${i})`).attr('src', `./images/${arr[i]}.png`);
	}
	// return arr;
}
// 函数 用于打乱数组
function randomSort() {
	return Math.random() > .5 ? -1 : 1;
	//随机数大于0.5返回-1，反之返回1
}
// 函数 生成一个打乱排序的数组
function randomOrder() {
	var random_list = [];
	// var ran = Math.floor(Math.random() * 36);
	for (var i = 0; i < 36; i++) {
		random_list.push(i)
	}
	var random_list = random_list.sort(randomSort);
	return random_list;
}

// 函数,打散图片 (重点)
function dissort(randomOrder) {
	//获取格子的宽高
	var temp = $('.outbd').eq(0).outerWidth();
	// 根据格子宽高变化设置游戏盒子的宽高
	$('.game_box').css({
		'height': `${temp * lv + 60}`,
		'width': `${temp * lv + (lv * 5)}`,
	})
	// console.log('随机数组', randomOrder);
	$('.outbd').each(function (index, item) {
		//乱序
		var row = Math.floor(randomOrder[index] / lv);
		var col = Math.floor(randomOrder[index] % lv);

		$(item).css({
			top: `${row * temp + (row * 10)}px`,
			left: `${col * temp + (col * 5)}px`,
		})

		// console.log(`第${index}个移到了`, row, col);
		//正常排序  
		// var row = Math.floor(index / lv);
		// var col = Math.floor(index % lv);

		// $(item).css({
		// 	top: `${row * temp + (row * 10)}px`,
		// 	left: `${col * temp + (col * 5)}px`,
		// })
		// console.log( row, col);
	})
}
// 函数,获取最高记录
function record() {
	if (hell == true) {
		var get_record = localStorage.getItem(`hell${lv}`) || count;
		$('.score').html(`记录: ${get_record}`);
	} else {
		var get_record = localStorage.getItem(`bt${lv}`) || count;
		$('.score').html(`记录: ${get_record}`);
	}
}
// 函数 提示控制
function tipsControl() { 
	$('.tips').css({ 'background-color': '#1c8fea' });
	if (hell == true) {
		 tips = 5;
		$('.tips').html(`tips(${tips})`);
	} else { 
		tips = 3;
		$('.tips').html(`tips(${tips})`);
	}
}
// 定制难度
var lv = 6;
var row = col= lv;
// 初始化步数
var count = 0;
//记录已消的数量
var hide = 0;
var tips = 0;
var flag = true;
// 初始化页面
function init() {
	hide = 0;
	count = 0;
	//调用渲染函数
	render(row, col);
	//调用生成数组函数,根据行列放入图片
	draw(row, col);
	//初始渲染所有格子,并打乱顺序
	dissort(randomOrder());
	//初始化步数
	$('.step').html(`步数: ${count}`);
	//获取记录,有则拿下来.没有则count
	record();
	tipsControl();
	// 初始化页面先亮牌再合上
	$('.item').addClass('start_act')
	setTimeout(() => {
		$('.item').removeClass('start_act')
	}, 1500);
}
init();
//点击翻牌
$('.game_box').on('click', '.item', function (e) {
	
	if (hell) {
		if (flag) {
			count++;
			//每次点击记录步数
			$('.step').html(`步数: ${count}`)
			$(this).toggleClass('act');
			//点击了两张就比较
			if ($('.act').length == 2) {
				var compare1 = $('.act img').eq(0).attr('src')
				var compare2 = $('.act img').eq(1).attr('src')
				//两张相同
				flag = !flag;
				if (compare1 == compare2) {
					setTimeout(() => {
						//先消失在去除翻转样式,因为前面需要用翻转样式比较
						$('.act').addClass('disappear');
						$('.act').toggleClass('act');
						flag = !flag;
					}, 500)
					//消失牌数加2
					hide += 2;
					//通关
					if (hide == $('.item').length) {
						var get_record = localStorage.getItem(`hell${lv}`);
						if (get_record = null) {
							localStorage.setItem(`hell${lv}`, JSON.stringify(count));
							//如果当前用的步数更少,则是新纪录
						} else if (count < get_record) {
							localStorage.setItem(`hell${lv}`, JSON.stringify(count));
							$('.score').html(`记录:  ${count}`);
						}
						//通关遮罩
						var passhtml = `<h1>PERFECT</h1>
					<h3>score: ${count} </h3>
					<div class="btn_box">
					<div class="btn again">again</div>
					<div class="btn home">home</div>
					</div>`
						$('.end').html(passhtml);
						$('.mask').fadeIn();

					}

				} else {//两张不同
					setTimeout(() => {
						$('.act').toggleClass('act');
						flag = !flag;
					}, 400)
					//重置比较项
					
				}
				compare1 = compare2 = null;
				//每点击两个后打乱
				// var arr = random(lv, col);
				draw(lv, col)
				setTimeout(() => {
					dissort(randomOrder());
				}, 100);

			}
		}
	} else {
		if (flag) {
			count++;
			//每次点击记录步数
			$('.step').html(`步数: ${count}`)
			$(this).toggleClass('act');
			//点击了两张就比较
			if ($('.act').length == 2) {
				var compare1 = $('.act img').eq(0).attr('src')
				var compare2 = $('.act img').eq(1).attr('src')
				flag = !flag;
				//两张相同
				if (compare1 == compare2) {
					setTimeout(() => {
						//先消失在去除翻转样式,因为前面需要用翻转样式比较
						$('.act').addClass('disappear');
						$('.act').toggleClass('act');
						flag = !flag;
					}, 500)
					//消失牌数加2
					hide += 2;
					//通关
					if (hide == $('.item').length) {
						var get_record = localStorage.getItem(`bt${lv}`);
						if (get_record = null) {
							localStorage.setItem(`bt${lv}`, JSON.stringify(count));
							//如果当前用的步数更少,则是新纪录
						} else if (count < get_record) {
							localStorage.setItem(`bt${lv}`, JSON.stringify(count));
							$('.score').html(`记录:  ${count}`);
						}
						//通关遮罩
						var passhtml = `<h1>PERFECT</h1>
					<h3>score: ${count} </h3>
					<div class="btn_box">
					<div class="btn again">again</div>
					<div class="btn home">home</div>
					</div>`
						$('.end').html(passhtml);
						$('.mask').fadeIn();

					}
			
				} else {//两张不同
					setTimeout(() => {
						$('.act').toggleClass('act');
						flag = !flag;
					}, 400)
				}
				//重置比较项
				compare1 = compare2 = null;
			}
		}
	}
})

function same(temp) { 
	//随机拿到一个图片
	var alike1 = $('img').eq(temp).attr('src');
	// 遍历相同的图片翻转
		$('img').each(function (index, item) { 
			if ($(item).attr('src') == alike1) { 
				$('.item').eq(index).addClass('act');
			}
		})
	setTimeout(() => {
		$('.act').removeClass('act');
	}, 1000);

}
//点击tips
$('.tips').on('click', function () { 
	
	if (tips > 0 && $('.act').length == 0) {
		tips--;
		$('.tips').html(`tips(${tips})`);
		var temp = Math.floor(Math.random() * 36);
		same(temp)
		if (tips == 0) { 
			$('.tips').css({ 'background-color': '#ccc' });
		}
		
	} 
})
//点击again
$('.again').on('click', function () {
	// 清空,初始化
	$('.game_box').html(``);
	init(lv, col);
})
$('.mask').on('click', '.again', function () {
	// 清空,初始化
	$('.game_box').html(``);
	init(lv, col);
	$('.mask').fadeOut();
})
//点击home
$('.home').on('click', function () {
	window.location.href = "./index.html"
})
$('.mask').on('click', '.home', function () {
	window.location.href = "./index.html"
})
//点击hell
var hell = false;
$('.hell').on('click', function (e) {
	//弹出提示遮罩
	if (hell == false) {
		var hellhtml = `
					<h3>是否开启地狱模式?</h3>
					<div class="btn_box">
					<div class="btn yes">进入</div>
					<div class="btn no">算了</div>
					</div>`
		$('.end').html(hellhtml);
		$('.mask').fadeIn();
	} else {
		var hellhtml = `
					<h3>退出地狱模式!</h3>
					<div class="btn_box">
					<div class="btn yes">溜了</div>
					<div class="btn no">不走</div>
					</div>`
		$('.end').html(hellhtml);
		$('.mask').fadeIn();
	}
})
//是否开启地狱模式
$('.mask').on('click', '.yes', function () {
	//开启地狱模式
	if (hell == false) {
		hell = !hell;
		$('.hell').toggleClass('hell_on');
		$('.hell').html('hell on');
		$('.mask').fadeOut();
		$('.game_box').html(``);
		init(lv, col);
	} else {
		hell = !hell;
		$('.hell').toggleClass('hell_on');
		$('.hell').html('hell off');
		$('.mask').fadeOut();
		$('.game_box').html(``);
		init(lv, col);
	}

})
$('.mask').on('click', '.no', function () {
	$('.mask').fadeOut();
})
